"use client";

import { ArrowRightCircle } from "lucide-react";
import Link from "next/link";

import type { ProjectSummary } from "@/lib/types";

interface ProjectsSummaryProps {
  projects: ProjectSummary[];
}

export function ProjectsSummary({ projects }: ProjectsSummaryProps) {
  if (projects.length === 0) {
    return (
      <div className="md:col-span-2">
        <div className="h-full rounded-lg border border-dashed border-border bg-card/50 p-6 text-sm text-muted-foreground">
          暂无项目数据，检查后端种子或稍后再试。
        </div>
      </div>
    );
  }

  return (
    <div className="md:col-span-2">
      <div className="space-y-4 rounded-lg border border-border bg-card p-6 shadow-sm">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-sm font-semibold uppercase text-muted-foreground">项目产值概览</h2>
            <p className="text-xs text-muted-foreground">展示前三个项目的当月进度</p>
          </div>
          <Link href="/schedule" className="inline-flex items-center gap-2 text-xs text-primary">
            查看排产 <ArrowRightCircle className="h-4 w-4" />
          </Link>
        </div>
        <div className="grid gap-3">
          {projects.slice(0, 3).map((project) => (
            <div
              key={project.id}
              className="rounded-md border border-input bg-background px-4 py-3"
            >
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm font-medium text-foreground">{project.name}</p>
                  <p className="text-xs text-muted-foreground">
                    目标：{project.monthlyTarget ?? "--"} / 完成：{project.currentValue ?? "--"}
                  </p>
                </div>
                <span className="text-xs font-semibold text-primary">
                  {project.progressPercentage != null ? `${project.progressPercentage}%` : "--"}
                </span>
              </div>
              <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
                <div
                  className="h-2 rounded-full bg-primary"
                  style={{ width: `${Math.min(project.progressPercentage ?? 0, 100)}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
